<template>
  <div class="permission">
    <div class="title">权限设置</div>
    <div class="sub-title">新建工单权限<span class="tip">可以新建该流程的工单</span></div>
    <optionalScope
      class="width-500"
      key="createScope"
      :isCheckbox="true"
      :tabs="tabs"
      :width="500"
      :value="createScope">
    </optionalScope>
    <div class="sub-title" v-if="false">查看工单权限<span class="tip">可以查看该流程的所有工单</span></div>
    <optionalScope
      key="readScope"
      :isCheckbox="true"
      class="width-500"
      :tabs="tabs"
      :width="500"
      v-if="false"
      :value="readScope">
    </optionalScope>
    <div class="sub-title" v-if="false">删除工单权限<span class="tip">可以删除该流程的所有工单</span></div>
    <optionalScope
      key="delScope"
      :isCheckbox="true"
      class="width-500"
      :tabs="tabs"
      :width="500"
      v-if="false"
      :value="delScope">
    </optionalScope>
    <el-button type="primary" @click="save" size="mini">保存</el-button>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import optionalScope from '../../components/optionalScope.vue'
import { CommonModule } from '@/store/modules/common'
import { commonAction, handleData } from '@/utils/common';
// eslint-disable-next-line no-restricted-imports
import { cloneDeep } from 'lodash'
import { busConfigStore } from '@/afterSales/views/config/serviceConfig/store/busConfigStore'
const obj = {
  role: [],
  dept: [],
  user: [],
  service: [],
  technology: []
}
@Component({
  name: 'per',
  components: {
    optionalScope
  }
})
export default class extends Vue {
  private createScope = cloneDeep(obj)

  private id = ''

  private readScope = cloneDeep(obj)
  private delScope = cloneDeep(obj)
  private $route: any;
  private $message: any;

  private get userList () {
    return (CommonModule as any).publicCache.userList.map(v => ({ name: `${v.agentName} 【${v.agentNumber}】`, _id: v._id }))
  }

  private save () {
    const params = {
      deleteScopeList: this.delScope,
      createScopeList: this.createScope,
      readScopeList: this.readScope,
      modelId: this.$route.params.businessId
    }
    commonAction({ url: `/server-work/action/authority/config/${this.id ? 'update' : 'insert'}`, method: 'post', data: params }).then(res => {
      if (res.success) {
        this.$message.success('修改成功！')
      }
    })
  }

  private get tabs () {
    return [
      {
        name: '成员',
        type: 'user',
        list: this.userList,
        listMap: (CommonModule as any).publicCache.userListObj,
        defaultProps: { id: '_id', name: 'name' }
      },
      {
        name: '技能组',
        type: 'technology',
        list: (CommonModule as any).publicCache.queueList,
        listMap: (CommonModule as any).publicCache.queueListObj,
        defaultProps: { id: '_id', name: 'name' }
      },
      {
        name: '服务组',
        type: 'service',
        list: busConfigStore.serviceList,
        listMap: busConfigStore.serviceMap,
        defaultProps: { id: 'id', name: 'name' }
      },
      {
        name: '部门',
        type: 'dept',
        list: (CommonModule as any).publicCache.departmentTree?.tree || [],
        listMap: (CommonModule as any).publicCache.departmentListObj,
        defaultProps: {
          children: 'children',
          label: 'name',
          name: 'name',
          id: '_id'
        }
      },
      {
        name: '角色',
        type: 'role',
        list: (CommonModule as any).publicCache.roleList,
        listMap: (CommonModule as any).publicCache.roleListObj,
        defaultProps: { id: '_id', name: 'name' }
      }
    ]
  }

  private beforeMount () {
    if (!busConfigStore.serviceList.length) {
      commonAction({
        url: '/server-work/action/serviceGroup/listAll',
        method: 'post'
      }).then(res => {
        if (res.success) {
          handleData(res.data.serviceGroupList, 'service')
        }
      })
    }
    (this as any).$getCache('/base/action/general/cache/query', ['roleList'], true).then((data: any) => {
      console.log(data)
    })
    commonAction({ url: `/server-work/action/authority/config/search?modelId=${this.$route.params.businessId}`, method: 'get' }).then(res => {
      if (res.success) {
        this.id = res.data.id
        this.createScope = res.data.createScopeList || cloneDeep(obj)
        this.readScope = res.data.readScopeList || cloneDeep(obj)
        this.delScope = res.data.deleteScopeList || cloneDeep(obj)
      }
    })
  }
}
</script>
<style lang="stylus" scoped>
.permission {
  padding: 24px
  .width-500 /deep/.el-input__inner {
    // width 500px
  }
  .title {
    font-weight: 600;
    color: #303753;
    font-size: 14px
  }
  .sub-title {
    margin-top: 24px;
    margin-bottom: 12px
    font-weight: 400;
    color: #303753;
    font-size: 12px
  }
  .tip {
    color: #E0E6F0
    margin-left: 8px
  }
}
</style>
